import { Component, Emit, Prop, Watch } from 'vue-facing-decorator'
import Render from '@/render/Render'
import toNative from '@/utils/toNative'
import type { ComponentPublicInstance } from 'vue'
import style from './style.module.scss'
import { Tabs } from 'ant-design-vue'
import type { TabsType } from 'ant-design-vue/es/tabs/src/Tabs'

@Component
export class CTabs extends Render {
    @Prop() activeName?: string
    @Prop({ default: 'card'  }) type?: TabsType


    active = ''

    @Emit('update:activeName')
    updateActive(val: string) {
        return val
    } 

    @Watch('activeName')
    handleWatchActiveName(val: string) {
        this.active = val
    }

    @Watch('active')
    handleWatchActive(val: string) {
        this.updateActive(val)
    }

    render(data: ComponentPublicInstance) {
        return <Tabs class={`${style['custom-tabs']}`} tab-position="left" type={this.type} >
            {data.$slots?.default?.()}
        </Tabs> 
    }
}

export default toNative<{activeName?: string, type?: TabsType}, {}>(CTabs)                                                                           